<template name="new-people">
    <view class="container">
        <u-popup :show="isShow" @close="navigateTo('page/user/index')" bgColor="transparent" mode="top">
            <view class="container">
                <view class="bg">
                    <view class="title">
                        <view class="text">新</view>
                        <view class="text">人</view>
                        <view class="text">注</view>
                        <view class="text">册</view>
                        <view class="text">礼</view>
                    </view>
                    <view class="height"></view>
                    <view class="info">
                        <view class="title">{{ ticket.description }}</view>
                        <view class="coupon">
                            <text>{{ ticket.discount * 10 }}</text>
                            <text>折</text>
                        </view>
                    </view>
                    <view class="date">
                        活动时间：{{ ticket.beginAt }}-{{ ticket.endAt }}
                    </view>
                    <view class="btn" @click="buy()">去下单</view>
                </view>
                <view class="close" @click="hidden()"></view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        name: "new-people",
        data() {
            return {

            }
        },
        computed: {
          isShow() {
              return this.$store.getters.ticket? true:false
          },
          ticket() {
              return this.$store.getters.ticket? this.$store.getters.ticket:{}
          }
        },
        methods: {
            buy() {
                this.$store.dispatch("user/setTicket", null)
                uni.$u.route({
                    url: "pages/index/index",
                    type: "switchTab"
                })
            },
            hidden() {
                this.$store.dispatch("user/setTicket", null)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .bg {
            background: url("https://img.ionepin.com/9f6edf641205a6c53c763e548b4079a60158c823.png") no-repeat;
            background-size: 100% 100%;
            width: 544rpx;
            height: 698rpx;
            margin: 295rpx auto 0 auto;
            .height {
                width: 100%;
                height: 328rpx;
            }
            .info {
                background: url("https://img.ionepin.com/de2248e3910477b0c94721f5aeb079a078509aef.png") no-repeat;
                background-size: 100% 100%;
                width: 396rpx;
                height: 109rpx;
                margin: 0 auto 0 auto;
                padding: 0 29rpx;
                display: flex;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                -webkit-justify-content: space-between;
                .title {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #DD2B1B;
                    line-height: 109rpx;
                }
                .coupon {
                    font-size: 28rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #DD2B1B;
                    line-height: 109rpx;
                    margin-right: 20rpx;
                    text {
                        &:nth-child(1) {
                            margin-right: 9rpx;
                            font-size: 68rpx;
                            font-weight: bold;
                            color: #DD2B1B;
                        }
                    }
                }
            }
            .date {
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #E02020;
                margin-top: 30rpx;
                text-align: center;
            }
            .btn {
                background: url("https://img.ionepin.com/54e7f387b4d76779a16383dbb4549fcb675e9502.png") no-repeat;
                background-size: 100% 100%;
                width: 478rpx;
                height: 78rpx;
                text-align: center;
                line-height: 78rpx;
                margin: 87rpx auto 0 auto;
                color: #ffffff;
            }
        }
        .close {
            background: url("https://img.ionepin.com/3ba0044fb4ec2d458f3125b88722029d15450ee6.png");
            background-size: 100% 100%;
            width: 74rpx;
            height: 74rpx;
            margin: 53rpx auto 0 auto;
        }
        .title {
            display: flex;
            font-size: 50rpx;
            font-family: MFLiHei_Noncommercial-Regular, MFLiHei_Noncommercial;
            font-weight: 400;
            color: #FFFFFF;
            position: relative;
            .text {
                position: absolute;
                &:nth-child(1) {
                    top: 188rpx;
                    left: 132rpx;
                }
                &:nth-child(2) {
                    top: 197rpx;
                    left: 187rpx;
                }
                &:nth-child(3) {
                    top: 201rpx;
                    left: 245rpx;
                }
                &:nth-child(4) {
                    top: 197rpx;
                    left: 301rpx;
                }
                &:nth-child(5) {
                    top: 192rpx;
                    left: 359rpx;
                }
            }
        }
    }
</style>
